<template>
  <a-modal
    :visible="open"
    title="新增资产"
    width="480px"
    @ok="handleSubmit"
  >
    <a-form
      ref="formRef"
      style="margin-top: 24px"
      :model="formState"
      name="basic"
      :label-col="{ span: 5 }"
      :wrapper-col="{ span: 17 }"
      autocomplete="off"
    >
      <a-form-item
        label="资产名称"
        name="assetName"
        :rules="[
          { required: true, message: 'Please input your contractName!' },
        ]"
      >
        <a-input
          readOnly
          onfocus="this.removeAttribute('readonly');"
          onblur="this.setAttribute('readonly',true);"
          v-model:value="formState.assetName"
        />
      </a-form-item>
      <a-form-item
        label="资产编号"
        name="assetCode"
        :rules="[
          { required: true, message: 'Please input your contractName!' },
        ]"
      >
        <a-input
          readOnly
          onfocus="this.removeAttribute('readonly');"
          onblur="this.setAttribute('readonly',true);"
          v-model:value="formState.assetCode"
        />
      </a-form-item>
      <a-form-item
        label="EPC芯片码"
        name="assetEpc"
        :rules="[
          { required: true, message: 'Please input your contractName!' },
        ]"
      >
        <a-input
          readOnly
          onfocus="this.removeAttribute('readonly');"
          onblur="this.setAttribute('readonly',true);"
          v-model:value="formState.assetEpc"
        />
      </a-form-item>

      <a-form-item
        label="所属用户"
        name="clientId"
        :rules="[{ required: true, message: 'Please input your userId!' }]"
      >
        <a-input
          readOnly
          onfocus="this.removeAttribute('readonly');"
          onblur="this.setAttribute('readonly',true);"
          v-model:value="formState.clientId"
        />
      </a-form-item>
      <a-form-item label="所在楼层" name="assetFloor">
        <a-input
          readOnly
          onfocus="this.removeAttribute('readonly');"
          onblur="this.setAttribute('readonly',true);"
          v-model:value="formState.assetFloor"
        />
      </a-form-item>
      <a-form-item label="所在房间" name="assetPosition">
        <a-input
          readOnly
          onfocus="this.removeAttribute('readonly');"
          onblur="this.setAttribute('readonly',true);"
          v-model:value="formState.assetPosition"
        />
      </a-form-item>
      <a-form-item label="位置详情" name="address">
        <a-input
          readOnly
          onfocus="this.removeAttribute('readonly');"
          onblur="this.setAttribute('readonly',true);"
          v-model:value="formState.address"
        />
      </a-form-item>
      <a-form-item label="资产照片" name="assetImage">
        <a-upload
          v-model:file-list="fileList"
          action="https://www.mocky.io/v2/5cc8019d300000980a055e76"
          list-type="picture-card"
          @preview="handlePreview"
        >
          <div v-if="fileList.length < 1"></div>
        </a-upload>
      </a-form-item>
      <a-form-item label="备注" name="remark">
        <a-input
          readOnly
          onfocus="this.removeAttribute('readonly');"
          onblur="this.setAttribute('readonly',true);"
          v-model:value="formState.remark"
        />
      </a-form-item>
    </a-form>
  </a-modal>
</template>
<script setup lang="ts">
import { ref, defineProps, reactive, defineEmits } from 'vue';
import type { AssetBo } from '#/api/common';
import { type FormInstance, message, type UploadProps } from 'ant-design-vue';
import { addAssetApi, uploadContractApi } from '#/api';
const emit = defineEmits(['handleSubmit']);

const previewVisible = ref(false);
const previewImage = ref('');
const previewTitle = ref('');
const fileList = ref<UploadProps['fileList']>([]);
const formRef = ref<FormInstance>();

const props = defineProps({
  open: {
    type: Boolean,
    required: true,
    default: false,
  },
});
let formState = reactive<AssetBo>({
  assetName: '',
  assetCode: '',
  assetEpc: '',
  clientId: '',
  assetFloor: '',
  assetPosition: '',
  address: '',
  assetImage: '',
  remark: '',
});

const handleSubmit = () => {
  console.log('form value', formState);
  const _this = this;
  formRef.value
    ?.validateFields()
    .then(() => {
      // formState.files = fileResultList.value;
      // console.log('fileResultList', fileResultList);
      console.log('formState', formState);
      emit('handleSubmit', formState);
      // addAssetApi(formState).then(() => {
      //   message.success('添加成功');
      //   open.value = false;
      // });
    })
    .catch((e) => {
      console.log('表单错误', e);
      message.error('表单填写错误');
    });
};
</script>
